<template>
  <div>
    <v-header></v-header>
    <div class="home_top">
      <!-- 搜索 -->
      <div class="div_search">
        <span><van-icon class="van_location" name="location-o" /></span>
        <span><img src="./img/white.png" alt="" /></span>
        <span><van-search placeholder="请输入关键字" v-model="home_search" @keydown.enter="search" /></span>
        <span><van-icon name="shop-o" /></span>
      </div>
      <!-- 导航栏 -->
      <v-nav :navs="navs" :num="1">
        <span> <van-icon name="wap-nav" />分类</span>
      </v-nav>
    </div>
    <!-- lunbotu -->
    <v-lunbo :lunbotu="lunbotu"></v-lunbo>

    <!-- vgrid5 -->
    <div class="vGrid51">
      <van-grid :border="false" :column-num="grids.length">
        <van-grid-item v-for="item in grids" :key="item.id">
          <van-image :src="item.src" />
          <span>{{ item.title }}</span>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- <v-grid5 :grids="grids"></v-grid5> -->

    <!-- 限时秒杀 -->
    <div class="wrap">
      <div class="left">
        <div class="wrap_left_left">
          <!-- 限时秒杀图片 -->
          <div class="fixed_img" @click="$router.push(`/detail?id=${seckill.id}`)"><img :src="_localhost + seckill.img" alt="" /></div>
          <div>{{seckill.title}}</div>
          <!-- 倒计时 -->
          <div><van-count-down :time="time" format="DD:HH:mm:ss " /></div>
        </div>
        <div class="wrap_left_right">
          <div @click="$router.push('/index/cates?num=0')">查看更多<span>></span></div>
        </div>
      </div>
      <div class="right">
        <div class="top">
          <p class="p1">品牌上新</p>
          <p class="p2">9点整，抢大牌</p>
          <div>疯抢红包 <span>&gt;</span></div>
        </div>
        <div class="bottom">
          <p class="bottom_p1">日用好物</p>
          <p class="bottom_p2">愿军多采颉</p>
        </div>
      </div>
    </div>
    <!-- 双11尖货预购 -->
    <div class="double11">
      <div class="double11_top">
        <span :class="double11 ? 'active' : ''" @click="double11s"
          >双十一尖货预购</span
        >
        <span :class="!double11 ? 'active' : ''" @click="double12s"
          >畅销全球</span
        >
      </div>
      <div class="double11_bottom">
        <van-grid :border="false" :column-num="doubles11.length">
          <van-grid-item v-for="item in doubles11" :key="item.id">
            <van-image :src="item.src" />
          </van-grid-item>
        </van-grid>
      </div>
    </div>

    <!-- 热门推荐 -->
    <div class="hot">
      <span :class="hot == 0 ? 'active' : ''" @click="hot = 0">热门推荐</span>
      <span :class="hot == 1 ? 'active' : ''" @click="hot = 1">上新推荐</span>
      <span :class="hot == 2 ? 'active' : ''" @click="hot = 2">所有商品</span>
    </div>
    <!-- 商品列表 -->
    <card :cards0="cards0" v-if="hot == 0"></card>
    <card :cards0="cards1" v-if="hot == 1"></card>
    <card :cards0="cards2" v-if="hot == 2"></card>
    <div class="kong"></div>
  </div>
</template>

<script>
//  轮播图
import lunbo1 from "./img/1.jpg";
import lunbo2 from "./img/2.jpg";
import lunbo3 from "./img/3.jpg";
import lunbo4 from "./img/4.jpg";
//  grid5 5张图
import grid1 from "./img/11.png";
import grid2 from "./img/12.png";
import grid3 from "./img/13.png";
import grid4 from "./img/14.png";
import grid5 from "./img/15.png";
// 双11尖货预购
import double1 from "./img/01.png";
import double2 from "./img/02.png";
import double3 from "./img/03.png";
import double4 from "./img/04.png";
import card from "../../components/card.vue";

// 导入axios
import { getBanners, getCate, getseckill } from "../../request/api.js";

import { gethortgoods } from "@/request/api.js";
export default {
  components: { card },
  data() {
    return {
      // 查找
      home_search:"",
      double11: true,
      hot: 0,
      lunbotu: [
        { id: "001", src: lunbo1 },
        { id: "002", src: lunbo2 },
        { id: "003", src: lunbo3 },
        { id: "004", src: lunbo4 },
      ],
      grids: [
        { id: "001", src: grid1, title: "限时秒杀" },
        { id: "002", src: grid2, title: "畅销商品" },
        { id: "003", src: grid3, title: "品质大牌" },
        { id: "004", src: grid4, title: "小U自营" },
        { id: "005", src: grid5, title: "积分商城" },
      ],
      navs: [
        { id: "001", catename: "手机通讯" },
        { id: "002", catename: "生活家电" },
        { id: "003", catename: "家居" },
        { id: "004", catename: "服装" },
        { id: "005", catename: "男" },
      ],
      // 双11 初始
      doubles11: [
        { id: "001", src: double1, title: "" },
        { id: "002", src: double2, title: "" },
        { id: "003", src: double3, title: "" },
        { id: "004", src: double4, title: "" },
      ],
      // 双11 尖货预购数据
      doubles11data: [
        { id: "001", src: double1, title: "" },
        { id: "002", src: double2, title: "" },
        { id: "003", src: double3, title: "" },
        { id: "004", src: double4, title: "" },
      ],
      // 畅销全球数据
      doubles12data: [
        { id: "001", src: double4, title: "" },
        { id: "002", src: double3, title: "" },
        { id: "003", src: double2, title: "" },
        { id: "004", src: double1, title: "" },
      ],
      cards0: [
        {
          id: "001",
          src: lunbo1,
          title: "小米10",
          price: "3999",
          yPrice: "4999",
        },
        {
          id: "002",
          src: lunbo2,
          title: "小米11",
          price: "3999",
          yPrice: "4999",
        },
      ],
      // // 获取限时秒杀商品信息
      seckill: [],

      //首页商品信息
      cards1: [],
      cards2: [],
      // 限时秒杀是时间
      time: 30 * 60 * 60 * 1000 * 30,
    };
  },
  methods: {
    double11s() {
      this.double11 = true;
      this.doubles11 = this.doubles11data;
    },
    double12s() {
      this.double11 = false;
      this.doubles11 = this.doubles12data;
    },
    // 查找 传值跳转
    search(){
      let data = this.home_search

      this.$router.push(`/search?keywords=${data}`)
      this.home_search = ''
    }
  },
  mounted() {},
  async created() {
    // 轮播图
    let result = await getBanners();
    // console.log(result,"home.vue");
    this.lunbotu = result.data.list;
    // 分类
    let getCateRes = await getCate();
    // console.log(getCateRes,"home.vue");
    this.navs = getCateRes.data.list;
    // console.log(this.navs);
    // /api/gethortgoods 获取商品信息(首页)

    let gethortgoodsRes = await gethortgoods();
    this.cards0 = gethortgoodsRes.data.list[0].content;
    this.cards1 = gethortgoodsRes.data.list[1].content;
    this.cards2 = gethortgoodsRes.data.list[2].content;

    // 获取限时秒杀商品信息
    let getseckillRes = await getseckill();
    this.seckill = getseckillRes.data.list[0]
    this.time = this.seckill.endtime-this.seckill.begintime
  },
};
</script>

<style scoped lang="less">
.home_top {
  width: 100vw;
  height: 0.9rem;
  background-image: url("../../assets/home.jpg");
}
.div_search {
  margin-top: -0.02rem;
  /* display: flex; */
  height: 0.4rem;
  width: 100vw;
  /* background-image: url("../../assets/home.jpg"); */
  /* border: 1px solid red; */
}
.div_search span {
  float: left;
}
.div_search .van_location {
  margin-left: 0.1rem;
  width: 0.2rem;
  height: 0.4rem;
  color: white;
  line-height: 0.4rem;
  font-size: 0.27rem;
}

.div_search img {
  margin-left: 0.2rem;
  width: 1.2rem;
  height: 0.3rem;
  margin-top: 0.05rem;
}
.div_search .van-search {
  float: left;
  width: 1.5rem;
  height: 0.4rem;
  background-color: #fff0;
  padding: 0 0.05rem;
  margin-left: 0.1rem;
}
.div_search .van-icon {
  margin-left: 0.1rem;
  width: 0.2rem;
  height: 0.4rem;
  color: white;
  line-height: 0.4rem;
  font-size: 0.27rem;
}

.v-nav {
  margin-top: -0.2rem;
}
/* 限时秒杀 */
.wrap {
  width: 100vw;
  height: 2.5rem;
  background-color: #ccc6;
  padding: 0.1rem;
  box-sizing: border-box;
}
.wrap > .left {
  float: left;
  width: 45vw;
  height: 2.2rem;
  /* border: 1px solid red; */
  background-image: url("./img/x_left.png");
  background-size: 45vw 2.2rem;
  padding: 0.1rem;
  box-sizing: border-box;
  position: relative;
  .fixed_img,
  .fixed_img > img {
    // overflow: hidden;
    position: absolute;
    top: 25%;
    left: 5%;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
  }
}
.wrap > .right {
  margin-left: 0.1rem;
  float: left;
  width: 45vw;
  height: 2.2rem;
  /* border: 1px solid red; */
}
.wrap > .right > .top {
  width: 45vw;
  height: 1.3rem;
  /* border: 1px solid red; */
  background-image: url("./img/x_right_top.png");
  background-size: 45vw 1.3rem;
  padding: 0.1rem;
  box-sizing: border-box;
}
.wrap > .right > .top > .p1 {
  color: #de7867;
  font-weight: 600;
}
.wrap > .right > .top > .p2 {
  color: #de7867;
  margin-top: 0.1rem;
}

.wrap > .right > .top > div {
  margin-top: 0.15rem;
  background-color: #ff8061;
  width: 20vw;
  height: 0.5rem;
  border-radius: 0 0.2rem 0.2rem 0;
  text-align: center;
  color: white;
  line-height: 0.25rem;
}

.wrap > .right > .bottom {
  margin-top: 0.2rem;
  width: 45vw;
  height: 0.7rem;
  /* border: 1px solid red; */
  background-image: url("./img/x_right_bottom .png");
  background-size: 45vw 0.7rem;
  padding: 0.1rem;
  box-sizing: border-box;
}
.wrap > .right > .bottom > .bottom_p1 {
  color: #a54be9;
  font-weight: 600;
}
.wrap > .right > .bottom > .bottom_p2 {
  color: #a54be9;
  margin-top: 0.1rem;
}
.wrap_left_left {
  float: left;
}
.wrap_left_left div {
  margin-top: 0.15rem;
  color: #899d5b;
  font-weight: 600;
}
.wrap_left_right div {
  width: 0.6rem;
  float: left;
  margin-top: 0.15rem;
  /* color: #899D5B; */
  font-weight: 600;
  font-size: 0.12rem;
}

/* 双11 */
.double11_top {
  height: 0.4rem;
  line-height: 0.4rem;
  display: flex;
  justify-content: space-around;
  color: #999999;
}
.double11_top > span.active {
  font-weight: 600;
  color: #f38977;
}
/* 热门推荐 */
.hot {
  text-align: center;
  height: 0.4rem;
  line-height: 0.4rem;
  display: flex;
  justify-content: space-around;
  color: #fea51d;
}
.hot > span.active {
  width: 30vw;
  height: 0.4rem;
  line-height: 0.4rem;
  font-weight: 600;
  background-color: #fea51d;
  color: #fff;
  border-radius: 0.07rem;
}

.vGrid51 span {
  font-size: 0.14rem;
}
/* 商品列表 */
/* 占位 */
.kong {
  height: 2rem;
}
</style>